import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit, OnChanges {

  @Input()
  rating: number = 0;

  @Output()
  ratingChange:EventEmitter<number> = new EventEmitter();

  @Input()
  readonly: boolean = true;

  stars: boolean[] = [];
  constructor() { }

  ngOnInit() {
    // this.stars = [];
    // for (let index = 0; index < 5; index++) {
    //   this.stars.push(index < this.rating)
    // }
  }

  // ngOnChanges 第一次调用会在 ngOnInit 之前
  ngOnChanges(changes: SimpleChanges): void {
    this.stars = [];
    for (let index = 0; index < 5; index++) {
      this.stars.push(index < this.rating)
    }
  }
  clickStar(i: number) {
    if (!this.readonly) {
      this.rating = i + 1;
      this.ratingChange.emit(this.rating)
    }
    

  }

}
